<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<title>工单-GIS地图</title>




<link rel="stylesheet" href="../../css/s_plus.css" />
<link rel="stylesheet" href="../../css/base.css" />
<link rel="stylesheet" href="../../css/layout.css" />
<link rel="stylesheet" href="../../css/choice.css" />
<link rel="stylesheet" href="../../css/hui.css" />

<script type="text/javascript" src="../../libs/vue.js" ></script>
<script type="text/javascript" src="../../js/jquery.1.9.1.min.js" ></script>
<script type="text/javascript" src="../../js/app/url.js" ></script>
<script type="text/javascript" src="../../libs/hui.js" ></script>
<script type="text/javascript" src="../../js/s_plus.js" ></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/app/api.js"></script>
<!--<script type="text/javascript" src="../../js/control/mescroll/mescroll.min.js"></script>-->
<!--<link rel="stylesheet" href="../../js/control/mescroll/mescroll.min.css" />-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo"></script>
<!--<script type="text/javascript" src="menu.js"></script>-->

<style>
			/*隐藏百度地图 底部LOGO*/
			.BMap_cpyCtrl {
				display: none;
			}
			
			.anchorBL {
				display: none;
			}
		</style>
</head>
<body>
<section id="wrapper" class="wrapper">
  <section class="pusher">
	<section class="sidenav sidebtn" ><!--侧边栏-->
	 
	</section>
	<section class="mainbody"><!--正文-->
      <header class="f_l maxbox header">
        <a class="side_arrow f_l arrow_l" data-effect="sidebtn"><i class="iconfont">&#xe600;</i></a>
        <h1 class="f_l">
          <a class="cur" >
            <i class="iconfont">&#xe608;</i>
            <b>GIS地图</b>
          </a>
          <a @click="worklist">
            <i class="iconfont">&#xe61f;</i>
            <b>工单</b>
          </a>
        </h1>
        <!--<a class="f_r arrow_r" href="javascript:void(0);"><i class="iconfont">&#xe888;</i></a>-->
        <ul class="head_nav">
          <li><a @click="queryByStatus(1)">待处理</a></li>
          <li><a @click="queryByStatus(2)">待接收</a></li>
        </ul>
      </header>
      <section class="f_l maxbox map">
        <!--<div class="f_l searchbar">
          <input class="search_key" name="" type="text" placeholder="请输入关键字">
          <button class="search_btn" name=""><i class="iconfont">&#xe63e;</i></button>
        </div>-->
        <!--<img src="../../images/map.jpg">-->
        
        		<div id="allmap" style="width: 100%;height:100%"></div>

      </section>
      <section class="f_l maxbox work_list" style="display: none;" >
        <dl>
          <a @click="go">
            <dt>
              <i class="iconfont bg_red">&#xe60f;</i>
              <b>{{showStatus(zd.status)}}</b>
            </dt>
            <dd class="txt_list">
              <p><em>设备类型：</em>{{zd.gjType}}</p>
              <p><em>设备编号：</em>{{zd.termimalCode}}</p>
              <p><em>设备地址：</em>{{zd.belongStreet}}</p>
            </dd>
          </a>
        </dl>
      </section>
	</section>
  </section>
</section>

<script>
		//动态插入公用菜单JS
	var menuJsPath = "../work/menu.js?time=";
	 var randomh=Math.random();
     var e = document.getElementsByTagName("script")[0];
     var d = document.createElement("script");
     d.src = menuJsPath+randomh+"";
     d.type = "text/javascript"; 
     d.async = true;
     d.defer = true;
     e.parentNode.insertBefore(d,e);

		var head = $(".header").height();
			var foot = $(".work_list").height();
			var pageHeight = $(document).height();
			var mapHeight = pageHeight - (head);
			$("#allmap").height(mapHeight);
	
		var sp = new Vue({
			el:"#wrapper",
			data:{
				zd:{}
			},
			methods:{
				go:function(){
					var workId= this.zd.workId;
					localStorage.setItem("workId",workId);
					hui.open("work_show.html", {}, true, {});
				},
			
				showStatus:function(status){
	
					if(status=='0'){
						return "无告警	";
					}
					else if(status=='1'){
						return "一般告警";
					}
						else if(status=='2'){
						return "严重告警";
					}
					else{
						return "工单处理";

					}
				},
				worklist:function(){
					
					hui.open("work_list.html?time="+apiManage.getNow(), {}, true, {});
				}
			}
		});
	

	
	
</script>

<script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(112.9453203518, 28.2340227593);
			map.centerAndZoom(point, 10);
			map.enableScrollWheelZoom(false);


			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				console.log(r.point)
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {
					
//			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
				var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(300,157));
					var mk = new BMap.Marker(r.point,{icon:myIcon});
					mk.addEventListener("click",attribute);
					
					function attribute(){
							var p = mk.getPosition();  //获取marker的位置
							alert("marker的位置是" + p.lng + "," + p.lat);    
						
						}					
					
//					map.addOverlay(mk); //标出所在地
//					map.panTo(r.point); //地图中心移动

					
					var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents;
					
						console.log(rs.address); //地址信息
						//alert(rs.address);//弹出所在地址

					});
				} else {
					alert('定位失败，请检查您的手机定位功能是否打开' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			})
			
			
			//标记
			function addMarker(cell){
					var point = new BMap.Point(cell.lng,cell.lat);
					var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(300,157));
					var mk = new BMap.Marker(point,{icon:myIcon});
//					var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
//					mk.setLabel(label);
					
					mk.addEventListener("click",attribute);
								map.addOverlay(mk); //标出所在地

										map.panTo(point); //地图中心移动
										
					function attribute(){
						
									$("#allmap").height(mapHeight-foot);

//						alert('终端ID:'+cell.zdID);
							var p = mk.getPosition();  //获取marker的位置
							console.log(cell.zdID);    
						    loadDetail(cell);
						
						}					

			}
			
			
			loadData();
			function loadData(){
				var path = urlManager.worklist();
  	var username=	localStorage.getItem("username");
		var sec= localStorage.getItem("sec_pwd");
  	var time = getNow();
  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
  	
  	  	console.log(key);

  	var paramKey=hex_md5(key);
  	
  		var jsonParam = JSON.stringify({loginName:username,time:time,key:paramKey});
  	
  	  hui.loading("");
  	  
					$.ajax({
		         type: "GET",
		         url: path,
		         beforeSend: function(request) {
		            request.setRequestHeader("loginName",username);
		            request.setRequestHeader("time",time);
		            request.setRequestHeader("sign",paramKey);
		            request.setRequestHeader("Content-Type","application/text");
		
		         },
		         success: function(result) {
		            hui.closeLoading();
		          			 console.log("工单列表:"+JSON.stringify(result));
		          		 var datas=result.list;
		
									if(datas==null){
										return;
									}
							     for(var i=0;i<datas.length;i++){
							     	      var param = datas[i];
							     	     var cell = new Object();
							     	     cell.lat=param.LATITUDE;
							     	     cell.lng=param.LONGITUDE;
							     	     cell.title=param.ALARM_TITLE;
							     	     cell.zdID=param.ZD_ID;
							     	     cell.id= param.ID;
							     	 				addMarker(cell);
							     }
			
						}		 
		             
		         
		     });
	
			}
			
			//终端详情
			function loadDetail(cell){
				var pid = cell.zdID;
				sp.zd.workId=cell.id;
			  	var username=	localStorage.getItem("username");
					var sec= localStorage.getItem("sec_pwd");
			  	var time = apiManage.getNow();
			  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
//			  		console.log("key:  "+key);

				   var path = urlManager.terminalDetail()+"?terminalCode="+pid;
//				   console.log("path:  "+path);
				  var paramKey = hex_md5(key);

				  		$.ajax({
		         type: "GET",
		         url: path,
		         beforeSend: function(request) {
		            request.setRequestHeader("loginName",username);
		            request.setRequestHeader("time",time);
		            request.setRequestHeader("sign",paramKey);
		            request.setRequestHeader("Content-Type","application/text");
		
		         },
		         success: function(result) {
		          	console.log("终端详情:"+JSON.stringify(result));
			
			    $(".work_list").show();
									sp.zd = result;
						}		 
		             
		         
		     });
				  
			}
			
		//获取当前时间戳
				function getNow () {
					var timestamp=new Date().getTime();
					return timestamp;
				}
				
			
		</script>
</body>
</html>
<!--侧边栏向左移动效果*该放在head无效-->
<script src="../../js/modernizr.custom.js"></script>
<script src="../../js/classie.js"></script>
<script src="../../js/sidebarEffects.js"></script>